<template>
    <view>
        <view class="page">
            <!-- 会员码 -->
            <view class="modal-mask" @tap="hideModal" v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
            <!-- 微信弹出层 -->
            <view v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="modal-contents" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                    <view class="qrcodebox">
                        <view class="qrcodetextbox">
                            <view class="qrcodetext">
                                <text>{{ storename }}</text>
                                付款码
                            </view>
                            <view class="qrcodetext2">请出示该付款码给客户扫码</view>
                        </view>

                        <image :show-menu-by-longpress="true" class="qrcodeimage" mode="widthFix" :src="imagePath"></image>
                        <text class="qrcodespan"></text>
                    </view>
                    <view class="qrcodeicon" @tap="done">关闭</view>
                </view>
            </view>
            <view class="puy">
                <!-- <view class="text-red">¥{{singleamount*num}}</view> -->
                <view class="pay_msg">
                    <view class="pay_bg">
                        <image class="pay_icon_2" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_2.png" mode="" />
                        <image class="pay_icon_4" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_4.png" mode="" />
                        <image class="pay_icon_7" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_7.png" mode="" />
                        <view class="pay_text">
                            <text>提交订单</text>
                            <text>付款</text>
                        </view>
                        <view class="pay_title_box">
                            <view class="hr_1">
                                <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_12.png" mode="" />
                            </view>
                            <text>订单金额</text>
                        </view>
                        <view class="pay_num">
                            <text>¥{{ marketprice * nums }}</text>
                        </view>
                        <view class="pay_date">
                            <text>订单提交成功，请在10分钟内完成支付</text>
                        </view>
                    </view>
                    <view class="bg_"></view>
                </view>
                <view class="epayment-box" v-if="false">
                    <view class="waivepayment-box">
                        <image class="waive_icon" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/waive_icon.png"></image>
                        <view class="waivepayment" v-if="false" @tap="waivepay">免单></view>
                    </view>
                </view>
                <view class="pay_type">
                    <view class="hot"></view>
                    <text>支付方式</text>
                </view>
                <view class="pay_view">
                    <view v-if="type == 4">
                        <view
                            v-if="item.flag && index != 1"
                            :class="(index !== 3 && index !== 4 ? 'flexbox-sb' : 'flexbox-sb_2') + ' puybox'"
                            :data-index="index"
                            :data-paytype="item.payType"
                            @tap="onClick"
                            v-for="(item, index) in list3"
                            :key="index"
                        >
                            <view :class="(listindex === index ? 'puytext2' : 'puytext1') + ' centers'">
                                <image class="pay_icon mr-20" v-if="item.img" :src="item.img"></image>
                                <text :style="index === 4 ? 'margin-left: 53rpx;' : ''">{{ item.title }}</text>
                                <text style="margin-left: 20rpx; margin-right: 10rpx">{{ item.let }}</text>
                                <image class="pay_icon mr-20" v-if="item.img" :src="item.img2"></image>
                                <text :style="index === 4 ? 'margin-left: 53rpx;' : ''">{{ item.title2 }}</text>
                            </view>

                            <block v-if="item.img">
                                <view v-if="listindex === index" class="bigbox">
                                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                                </view>
                                <view v-else class="bigbox">
                                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                                </view>
                            </block>

                            <block v-else>
                                <view v-if="index === 3">
                                    <input @input="oncash" :value="cash" class="weui-input" auto-focus :placeholder="marketprice" />
                                </view>
                                <view v-if="index === 4">
                                    <input @input="retailFun" :value="retail" class="weui-input" placeholder="请输入找零金额" />
                                </view>
                            </block>
                        </view>
                    </view>
                    <view v-else-if="type == 2">
                        <view
                            v-if="item.flag && index != 1"
                            :class="(index !== 3 && index !== 4 ? 'flexbox-sb' : 'flexbox-sb_2') + ' puybox'"
                            :data-index="index"
                            :data-paytype="item.payType"
                            @tap="onClick"
                            v-for="(item, index) in list2"
                            :key="index"
                        >
                            <view :class="(listindex === index ? 'puytext2' : 'puytext1') + ' centers'">
                                <image class="pay_icon mr-20" v-if="item.img" :src="item.img"></image>
                                <text :style="index === 4 ? 'margin-left: 53rpx;' : ''">{{ item.title }}</text>
                                <text style="margin-left: 20rpx; margin-right: 10rpx">{{ item.let }}</text>
                                <image class="pay_icon mr-20" v-if="item.img" :src="item.img2"></image>
                                <text :style="index === 4 ? 'margin-left: 53rpx;' : ''">{{ item.title2 }}</text>
                            </view>

                            <block v-if="item.img">
                                <view v-if="listindex === index" class="bigbox">
                                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                                </view>
                                <view v-else class="bigbox">
                                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                                </view>
                            </block>

                            <block v-else>
                                <view v-if="index === 3">
                                    <input @input="oncash" :value="cash" class="weui-input" auto-focus :placeholder="marketprice" />
                                </view>
                                <view v-if="index === 4">
                                    <input @input="retailFun" :value="retail" class="weui-input" placeholder="请输入找零金额" />
                                </view>
                            </block>
                        </view>
                    </view>
                    <view v-else>
                        <view
                            v-if="item.flag && index != 1"
                            :class="(index !== 3 && index !== 4 ? 'flexbox-sb' : 'flexbox-sb_2') + ' puybox'"
                            :data-index="index"
                            :data-paytype="item.payType"
                            @tap="onClick"
                            v-for="(item, index) in list"
                            :key="index"
                        >
                            <view :class="(listindex === index ? 'puytext2' : 'puytext1') + ' centers'">
                                <image class="pay_icon mr-20" v-if="item.img" :src="item.img"></image>
                                <text :style="index === 4 ? 'margin-left: 53rpx;' : ''">{{ item.title }}</text>
                                <text style="margin-left: 20rpx; margin-right: 10rpx">{{ item.let }}</text>
                                <image class="pay_icon mr-20" v-if="item.img" :src="item.img2"></image>
                                <text :style="index === 4 ? 'margin-left: 53rpx;' : ''">{{ item.title2 }}</text>
                            </view>

                            <block v-if="item.img">
                                <view v-if="listindex === index" class="bigbox">
                                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                                </view>
                                <view v-else class="bigbox">
                                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                                </view>
                            </block>

                            <block v-else>
                                <view v-if="index === 3">
                                    <input @input="oncash" :value="cash" class="weui-input" auto-focus :placeholder="marketprice" />
                                </view>
                                <view v-if="index === 4">
                                    <input @input="retailFun" :value="retail" class="weui-input" placeholder="请输入找零金额" />
                                </view>
                            </block>
                        </view>
                    </view>
                </view>

                <view class="btn_box">
                    <view class="btn" @tap="goback">上一步</view>
                    <view class="btn" @tap="onPayment">结算</view>
                </view>
            </view>

            <van-overlay :show="showpay" @tap.native="onClickHide">
                <view class="overlaybox" @tap.stop.prevent="shop">
                    <view class="pab">
                        <van-icon @click="onClickHide" size="20px" name="cross" />
                    </view>
                    <view class="tit">请输入密码</view>
                    <view class="tit1">支付金额</view>
                    <view class="tit2">¥{{ singleamount * num }}</view>
                    <view class="hrs"></view>
                    <view class="flexbox-sb centers p-20">
                        <text>余额</text>
                        <text class="t-c">￥{{ wallet }}</text>
                    </view>
                    <padinput id="padinput" :Value="value" @infotan="getpassword($event, { tagId: 'padinput' })" :bool="true" :isFocus="isFocus"></padinput>
                </view>
            </van-overlay>
        </view>
        <view class="modal-mask2" @tap="hideModal" v-if="showModalsmearbut" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <view class="modal-mask2" @tap="hideModal" v-if="showModalselect" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <!-- 免单 -->
        <view v-if="showModalsmearbut" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content-showModalhandbrand" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodebox">
                    <view class="qrcodetextbox">
                        <view class="time-box2qm">
                            <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                            <view class="qrcodetext">免单</view>
                            <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                        </view>
                        <image class="done" @tap="hideModal" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                    </view>
                    <view class="helpcard-conter">
                        <view class="card-namebox">
                            <view class="cardname_lt">
                                <view class="card_name">免单金额：</view>
                                <input placeholder="请输入免单金额" :value="waivemoney" @input="waivemoneyFun" type="text" />
                            </view>
                        </view>
                        <view class="card-namebox">
                            <view class="cardname_lt">
                                <view class="card_name">免单人：</view>
                                <view class="select_card" @tap="Choosecard" v-if="stylistid == ''">请选择></view>
                                <view v-else>{{ stylistid }}</view>
                            </view>
                        </view>
                        <view class="card-namebox">
                            <view class="cardname_lt">
                                <view class="card_name">免单原因：</view>
                                <input placeholder="请输入免单原因" :value="cause" @input="getinfo" type="text" />
                            </view>
                        </view>
                    </view>
                    <scroll-view :scroll-y="true" class="mains">
                        <view class="smearbut-box" v-for="(item, index) in smearList" :key="index">
                            <view class="coupon-rl">
                                <view v-if="listindexsmear === index" :data-index="index" @tap="onClicksmear" class="bigbox2">
                                    <view class="smbox"></view>
                                </view>
                                <view
                                    v-else
                                    class="bigbox2"
                                    :data-item="item"
                                    :data-stylistid="item.stylistId"
                                    :data-nickname="item.nickname"
                                    :data-index="index"
                                    @tap="onClickcoupon"
                                ></view>
                            </view>

                            <view>{{ item.manner }}</view>
                        </view>
                    </scroll-view>
                    <view class="coupon-mai">
                        <view class="cancel-bnt" @tap="hideModal">取消</view>
                        <view class="affirm-bnt" @tap="affirm">确认</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 增加员工 -->
        <view v-if="showModalselect" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodetextbox">
                    <view class="time-box2">
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                        <view class="qrcodetext">增加员工</view>
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                    </view>
                    <image class="done" @tap="done" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                </view>

                <view class="qrcodebox">
                    <view class="qrcodetextbox2">
                        <input
                            class="input-phone-up"
                            maxlength="11"
                            @input="blurPhone2"
                            value=""
                            placeholder="请输入姓名，工号，手机号搜索"
                            placeholder-class="placeholder-style2"
                            type="text"
                        />
                        <view class="inquire2">查询</view>
                    </view>
                    <!-- <view class="phone-hint2" wx:if="{{ishint}}">
      输入正确手机号
    </view> -->
                    <view class="replace-box2" v-for="(item, index) in saleslist" :key="index">
                        <view v-if="indexai === index" :data-index="index" @tap="addonClick" class="bigbox">
                            <view class="smbox"></view>
                        </view>

                        <view v-else class="bigbox" :data-item="item" :data-stylistid="item.stylistId" :data-nickname="item.nickname" :data-index="index" @tap="addonClick"></view>

                        <view class="replace-lt">
                            <image class="girl2" mode="aspectFill" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/girl.png"></image>
                            <view>
                                <view class="lt-nname">小新</view>
                                <view class="lt-hpone2">工号：00018</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 画布，用来画二维码，只用来站位，不用来显示 -->
        <view class="canvas-box">
            <canvas v-if="!canvasHidden" style="width: 320rpx; height: 320rpx; background: #f1f1f1" canvas-id="mycanvas" />
        </view>
    </view>
</template>

<script>
// pages/maker/buymaker/pay/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request';

var QR = require('../../utils/qrcode.js');

import { getTime, getTouchData, toDecimal2 } from '../../utils/util.js';
let isPaying = false;
export default {
    data() {
        return {
            isshowm: false,
            marketprice: '',
            paytype: 3,
            indexai: '',
            orderNo: '',
            cash: '',
            retail: '',
            waivemoney: '',
            stylistid: '',
            cause: '',
            showModalselect: false,
            showModalsmearbut: false,
            showModal: false,
            waivepayment: false,

            //免单
            type: '',

            //收银3 散客4 创客5
            list: [
                {
                    title: '微信',
                    title2: '支付宝',
                    let: '/',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_8.png',
                    img2: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_9.png',
                    flag: true,
                    payType: 3
                },
                {
                    title: '支付宝支付',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_9.png',
                    flag: true,
                    payType: 6
                },
                {
                    title: '现金支付',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_11.png',
                    flag: true,
                    payType: 1
                },
                {
                    title: '收取现金：',
                    flag: false
                },
                {
                    title: '找零：',
                    flag: false
                },
                {
                    title: '门店余额支付',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_10.png',
                    flag: true,
                    payType: 2
                }
            ],

            list2: [
                {
                    title: '微信',
                    title2: '支付宝',
                    let: '/',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_8.png',
                    img2: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_9.png',
                    flag: true,
                    payType: 3
                },
                {
                    title: '支付宝支付',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_9.png',
                    flag: true,
                    payType: 6
                },
                {
                    title: '现金支付',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_11.png',
                    flag: true,
                    payType: 1
                },
                {
                    title: '收取现金：',
                    flag: false
                },
                {
                    title: '找零：',
                    flag: false
                }
            ],

            list3: [
                {
                    title: '微信',
                    title2: '支付宝',
                    let: '/',
                    img: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_8.png',
                    img2: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_9.png',
                    flag: true,
                    payType: 3
                }
            ],

            saleslist: [
                {
                    stylistId: 11158,
                    monthOrder: 0,
                    position: '高级美发师',
                    nickname: '18975158845',
                    headPortrait: 'https://yiyue-scrm.oss-cn-shenzhen.aliyuncs.com/2022-09-20/fe0721091d034c00b52e83a81f9083a6-file',
                    orderNumber: 0,
                    star: 3,
                    userId: 311259,
                    nexus: 0,
                    schedulingStatus: 1,
                    worksSum: 0,
                    services: [],
                    waitingPeopleNum: 0,
                    waitingTimes: 0,
                    staffId: 105903
                }
            ],

            listindex: 0,
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            wallet: 0,

            makerObj: null,
            password: '',
            showpay: false,
            bool: false,
            isFocus: false,
            makerDetail: null,
            value: '',
            kzs: false,
            singleamount: 199,
            totalamount: '',
            num: 1,
            nums: 1,
            flag: false,
            imagePath: '',
            storename: '',
            smearList: [],
            listindexsmear: '',
            canvasHidden: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // this.getCashInfo()
        if (options.type) {
            this.setData({
                type: options.type
            });
        }

        if (options.type == 3 || options.type == 4 || options.type == 5) {
            this.setData({
                waivepayment: true
            });
        }

        if (options.orderNo) {
            this.setData({
                orderNo: options.orderNo
            });
        }

        if (options.marketprice) {
            this.setData({
                marketprice: options.marketprice
            });
        }

        if (options.nums) {
            this.setData({
                nums: options.nums
            });
        } // this.wxPayment()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // this.getuserMakerInfo()
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getinfo(e) {
            this.setData({
                cause: e.detail.value
            });
        },

        waivemoneyFun(e) {
            this.setData({
                waivemoney: e.detail.value
            });
        },

        waivepay() {
            this.setData({
                showModalsmearbut: true
            });
        },

        oncash(e) {
            let cash = e.detail.value;
            this.setData({
                cash: cash
            });
        },

        retailFun(e) {
            let retail = e.detail.value;
            this.setData({
                retail: retail
            });
        },

        affirm() {
            const { waivemoney, stylistid, cause } = this;

            if (waivemoney == '') {
                uni.showToast({
                    title: '请输入免单金额',
                    icon: 'none'
                });
                return;
            } else if (stylistid == '') {
                uni.showToast({
                    title: '请选择免单人',
                    icon: 'none'
                });
                return;
            } else if (cause == '') {
                uni.showToast({
                    title: '请输入免单原因',
                    icon: 'none'
                });
            } else {
                this.setData({
                    showModalsmearbut: false
                });
            }
        },

        goback() {
            uni.navigateBack({
                delta: 1
            });
        },

        // 增加员工
        addonClick(e) {
            const { index, stylistid, nickname, item } = e.currentTarget.dataset;
            this.setData({
                stylistid: stylistid,
                indexai: index,
                bool: true,
                value: '',
                showModalselect: false,
                showModalsmearbut: true
            });
        },

        Choosecard() {
            this.setData({
                showModalsmearbut: false,
                showModalselect: true
            });
        },

        done() {
            this.setData({
                showModal: false
            });
        },

        hideModal() {
            this.setData({
                showModalselect: false,
                showModalsmearbut: false
            });
        },

        // 编辑数量
        add() {
            if (this.num == 100) {
                uni.showToast({
                    title: '一次性最大购买一百张',
                    icon: 'none'
                });
                this.setData({
                    num: 100
                });
                return;
            }

            this.setData({
                num: this.num + 1
            });
        },

        sub() {
            if (this.num == 1) {
                return;
            }

            this.setData({
                num: this.num - 1
            });
        },

        // 点击事件
        onClick(e) {
            const { index, paytype } = e.currentTarget.dataset;

            if (index === 3 || index === 4) {
                return;
            }

            if (index === 2) {
                this.setData({
                    'list[3].flag': true,
                    'list[4].flag': true
                });
            } else {
                this.setData({
                    'list[3].flag': false,
                    'list[4].flag': false
                });
            }

            this.setData({
                listindex: index,
                bool: true,
                value: '',
                paytype: paytype
            });
        },

        // 取消支付
        onClickHide() {
            this.setData({
                showpay: false,
                value: ''
            });
        },

        // 获取密码
        getpassword(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            if (this.kzs) {
                return;
            }

            this.setData({
                password: e.detail.inputValue
            });

            if (this.password.length == 6) {
                _request
                    .get('/settings/initPayWord', {
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        if (res.data.message == '支付密码还未设置' && res.data.data == 0) {
                            uni.showToast({
                                title: '支付密码还未设置',
                                icon: 'none',
                                duration: 1000
                            });

                            if (this.kzs) {
                                return;
                            }

                            this.setData({
                                kzs: true
                            });
                            setTimeout(() => {
                                this.setData({
                                    showpay: false,
                                    value: ''
                                });
                                uni.navigateTo({
                                    url: '/pages/setpaypassword/index'
                                });
                                setTimeout(() => {
                                    this.setData({
                                        kzs: false
                                    });
                                }, 1000);
                            }, 1000);
                        } else if (res.data.message == '支付密码已设置' && res.data.data == 1) {
                            _request
                                .postObj('/settings/checkPayWord', {
                                    payWord: this.password,
                                    userId: uni.getStorageSync('userid')
                                })
                                .then((res) => {
                                    this.setData({
                                        kzs: true
                                    });
                                    this.setData({
                                        password: ''
                                    });

                                    if (res.data.code === 200) {
                                        uni.login({
                                            success: (res) => {
                                                this.walletPayment(res.code);
                                            }
                                        });
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none',
                                            duration: 2000
                                        });
                                        setTimeout(() => {
                                            this.setData({
                                                kzs: false
                                            });
                                        }, 1000);
                                    }
                                });
                        }
                    });
            }
        },

        // 取消支付
        onClickHide() {
            this.setData({
                showpay: false,
                value: ''
            });
        },

        // 支付
        onPayment() {
            this.wxPayment();
            setTimeout(() => {
                if ((this.paytype == 3) & (this.isshowm == true)) {
                    this.setData({
                        showModal: true
                    });
                }
            }, 500); // if (this.data.listindex == 5) {
            //   _request.get('/settings/initPayWord', {
            //     userId: wx.getStorageSync('userid'),
            //   }).then((res) => {
            //     if (res.data.message == '支付密码还未设置' && res.data.data == 0) {
            //       wx.showModal({
            //         title: '您还未设置密码',
            //         content: '请先设置密码',
            //         confirmText: '前往设置',
            //         success(res) {
            //           if (res.confirm) {
            //             wx.navigateTo({
            //               url: '/pages/setpaypassword/index',
            //             })
            //           } else if (res.cancel) {}
            //         }
            //       })
            //     } else {
            //       this.setData({
            //         showpay: true,
            //         isFocus: true
            //       })
            //     }
            //   })
            // } else if (this.data.listindex == 1) {
            //   // 微信支付, 防止重复支付
            //   if (isPaying) {
            //     return
            //   }
            //   isPaying = true
            //   wx.login({
            //     success: res => {
            //       this.wxPayment(res.code)
            //     }
            //   });
            // }
        },

        //适配不同屏幕大小的canvas
        setCanvasSize: function () {
            var size = {};

            try {
                var res = uni.getSystemInfoSync();
                var scale = 750 / 320;
                var width = res.windowWidth / scale;
                var height = width; //canvas画布为正方形

                size.w = width;
                size.h = height;
            } catch (e) {
                // Do something when catch error
                console.log('获取设备信息失败' + e);
            }

            return size;
        },

        /**
         * 绘制二维码图片
         */
        createQrCode: function (url, canvasId, cavW, cavH) {
            //调用插件中的draw方法，绘制二维码图片
            QR.api.draw(url, canvasId, cavW, cavH);
            setTimeout(() => {
                this.canvasToTempImage(canvasId);
            }, 1000);
        },

        /**
         * 获取临时缓存照片路径，存入data中
         */
        canvasToTempImage: function () {
            var that = this; //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

            uni.canvasToTempFilePath({
                canvasId: 'mycanvas',
                success: function (res) {
                    var tempFilePath = res.tempFilePath;
                    console.log('tempFilePath', tempFilePath);
                    that.setData({
                        imagePath: tempFilePath // canvasHidden:true
                    });
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        },

        // 获取用户创客信息
        getuserMakerInfo() {
            _request
                .get('/maker/userMakerInfo', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            makerDetail: res.data.data
                        });
                    }
                });
        },

        // 去支付
        wxPayment() {
            const { paytype, marketprice, listindex } = this;

            if (listindex == 1) {
                uni.showToast({
                    title: '请选择微信/支付宝支付',
                    icon: 'none'
                });
                return;
            }

            _request
                .postObj('/orderpay/orderPay', {
                    orderNo: this.orderNo,
                    shopId: uni.getStorageSync('shopId'),
                    type: 2,
                    payType: paytype,
                    price: this.cash,
                    paymentType: 'wechatH5',
                    backPrice: this.retail || null
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        if (paytype == 3) {
                            if (res.data.data.obj == null) {
                                return;
                            } else {
                                let url = res.data.data.obj;
                                var size = this.setCanvasSize(); //动态设置画布大小

                                this.setData({
                                    isshowm: true
                                });
                                this.createQrCode(url, 'mycanvas', size.w, size.h);
                            }
                        } else if (paytype == 1 || paytype == 2) {
                            uni.showToast({
                                title: '支付成功'
                            });
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: '/pagesc/index/index'
                                });
                            }, 500);
                        }
                    } else {
                        isPaying = false;
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {});
        },

        // 钱包支付 支付类型，1订单支付，2，订单加价
        walletPayment(code) {
            _request
                .postObj('/makerCardPay/yiyueMakerCardPays', {
                    number: this.num,
                    singleamount: this.singleamount,
                    totalamount: this.singleamount * this.num,
                    code,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            showpay: false,
                            password: ''
                        });
                        uni.showToast({
                            title: '购买成功，赠送现金券已到账',
                            icon: 'none'
                        });
                        uni.redirectTo({
                            url: '/pages/maker/buymaker/paysucceed/index'
                        });
                        setTimeout(() => {
                            this.setData({
                                kzs: false
                            });
                        }, 2000); // setTimeout(() => {
                        //   this.setData({
                        //     kzs: false
                        //   })
                        //   if(this.data.makerDetail){
                        //     wx.redirectTo({
                        //       url: '../../makerdetails/index?title=' + this.data.makerDetail.description,
                        //     })
                        //   }else{
                        //     // 第一次购买
                        //     wx.redirectTo({
                        //       url: '../../makerdetails/index?title=' + '普通创客',
                        //     })
                        //   }
                        // }, 2000)
                    } else {
                        setTimeout(() => {
                            this.setData({
                                kzs: false
                            });
                        }, 2000);
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {});
        },

        // 获取账号余额
        getCashInfo() {
            _request
                .get('/wallet/getCashInfo', {
                    id: uni.getStorageSync('userid'),
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        wallet: res.data.data.realBalance
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        },

        onClicksmear() {
            console.log('占位：函数 onClicksmear 未声明');
        },

        onClickcoupon() {
            console.log('占位：函数 onClickcoupon 未声明');
        },

        blurPhone2() {
            console.log('占位：函数 blurPhone2 未声明');
        }
    }
};
</script>
<style>
/* pages/maker/buymaker/pay/index.wxss */
page {
    background: #fff;
}
.page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 支付方式 */
.puy {
    width: 750rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;

    box-sizing: border-box;
}

.pay_msg {
    width: 750rpx;
    height: 420rpx;
}

.flexbox-sb_2 {
    display: flex;
    align-items: center;
    width: 600rpx;
    margin-left: 52rpx !important;
}

.pay_bg {
    width: 670rpx;
    height: 370rpx;
    background: linear-gradient(124deg, #fe845e 0%, #fc6332 100%);
    border-radius: 10rpx;
    margin: 20rpx 40rpx;
    position: relative;
}

.pay_icon_2 {
    width: 523rpx;
    height: 86rpx;
    padding: 34rpx 75rpx;
}

.pay_icon_4 {
    width: 250rpx;
    height: 62rpx;
    position: absolute;
    top: 46rpx;
    left: 90rpx;
}

.pay_icon_7 {
    width: 59rpx;
    height: 62rpx;
    position: absolute;
    right: 90rpx;
    top: 46rpx;
}

.pay_text {
    width: 490rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 90rpx;
    top: 130rpx;
}

.pay_text text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.title {
    margin-top: 50rpx;
    text-align: center;
}

.pay_title_box {
    width: 210rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
}

.pay_title_box text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 11rpx;
}

.hr_1 image {
    width: 210rpx;
    height: 6rpx;
}

.pay_num {
    width: 250rpx;
    margin: 20rpx auto;
    display: flex;
    justify-content: center;
}
.page {
    background: #ffffff;
}
.pay_num text {
    font-size: 46rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 30px;
}

.pay_date {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.bg_ {
    width: 670rpx;
    height: 50rpx;
    position: relative;
    left: 40rpx;
    top: -30rpx;
    background: #ffe3da;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
}

.pay_msg_bg {
    width: 750rpx;
    position: relative;
    left: 0;
    top: -102rpx;
}

.pay_msg_bg image {
    width: 750rpx;
    height: 161rpx;
}

.pay_date text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.pay_type {
    height: 98rpx;
    line-height: 98rpx;
    margin-left: 39rpx;
    z-index: 9997;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
}

.pay_type .hot {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}

.pay_type text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #2e2d2d;
    margin-left: 10rpx;
}

.text-red {
    width: 100%;
    text-align: center;
    height: 66rpx;
    font-size: 48rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 66rpx;
}

.time {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    justify-content: center;
    margin: 20rpx 0 80rpx 0;
}

.van-count-down {
    font-size: 28rpx !important;
    font-family: PingFangSC-Regular, PingFang SC !important;
    font-weight: 500 !important;
    color: #333333 !important;
}

.hrs {
    margin: 10rpx 0 20rpx 0;
}

.bigbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bigbox image {
    width: 36rpx;
    height: 36rpx;
}

.puytext1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
}

.puytext2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722 !important;
    line-height: 40rpx;
}

.puybox {
    padding: 35rpx 0;
    margin: 10rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #e5e5e5;
}

.pay_view {
    padding: 0rpx 40rpx 80rpx 56rpx;
}

/* 按钮 */
.btn {
    width: 300rpx;
    height: 80rpx;
    background: #e94a18;
    border-radius: 40px;
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 84rpx;
    text-align: center;
    margin-top: 50rpx;
}

.btn_box {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;
}

.overlaybox {
    position: absolute;
    bottom: 0rpx;
    background: #ffffff;
    padding: 40rpx 20rpx;
    width: 650rpx;
    top: 20%;
    height: 460rpx;
    margin: 0 auto;
    left: 0;
    box-sizing: border-box;
    right: 0;
    border-radius: 10rpx;
}

.tit {
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
}

.tit1 {
    width: 100%;
    text-align: center;
    font-size: 20rpx;
}

.tit2 {
    width: 100%;
    text-align: center;
    font-size: 40rpx;
    margin-bottom: 40rpx;
}

.p-20 {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
}

.pab {
    position: absolute;
}

.t-c {
    color: #ff8722;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background: #ff8722;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #ffffff;
}

.text-dd {
    font-size: 44rpx;
}

.pay_icon {
    width: 35rpx;
    height: 35rpx;
}

.waivepayment-box {
    width: 130rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: center;
    height: 96rpx;
    line-height: 96rpx;
    z-index: 9999;
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.epayment-box {
    width: 100%;
    height: 96rpx;
    border-bottom: 20rpx solid #f1f1f1;
}

.waive_icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 8rpx;
}

/* 模态框 */
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}

/* 白色背景 */
.modal-content {
    position: fixed;
    top: 380rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 500rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}

.modal_title {
    height: 130rpx;
    display: flex;
    align-items: center;
    padding-left: 22rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    /* border-radius: 20rpx 20rpx 0px 0px; */
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 130rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox {
    text-align: center;
    height: 113rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}

.qrcodetext {
    margin: 0 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}

.qrcodeimage {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
}

.qrcodespan {
    display: block;
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 20rpx;
}

.modal_titleicon {
    width: 82rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.modal_titletext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
}

.modal_textarea {
    height: 395rpx;
    width: calc(100% - 40rpx);
    margin: 20rpx;
    overflow: visible !important;
}

.done {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}

.modal_textarea textarea {
    height: 100%;
    width: 100%;
}

.canvas-box {
    position: fixed;
    top: 999999rpx;
    left: 0;
}

.qrcodeiconbox {
    margin-top: 48rpx;
    width: 100rpx;
    text-align: center;
}

.phone-hint {
    color: #ffffff;
    font-size: 24rpx;
}
.modal-content-showModalhandbrand {
    position: fixed;
    top: 280rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 700rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}
.time-box2qm {
    width: 150rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.time-box2 {
    width: 210rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.time-left {
    width: 21rpx;
    height: 15rpx;
}
.mains {
    margin-top: 119rpx;
    overflow-y: auto;
}

.coupon-mai {
    display: flex;
    height: 67rpx;
    width: 550rpx;
    margin: 0 auto;
    justify-content: space-between;
}

.cancel-bnt {
    text-align: center;
    line-height: 66rpx;
    width: 201rpx;
    height: 67rpx;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.affirm-bnt {
    text-align: center;
    line-height: 66rpx;
    width: 200rpx;
    height: 66rpx;
    background: #e94c19;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2);
    border-radius: 33rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.done {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}
.helpcard-conter {
    padding: 0rpx 40rpx;
}

.card-namebox {
    height: 99rpx;
    display: flex;
    line-height: 99rpx;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
}

.cardname_lt {
    display: flex;
    align-items: center;
}

.cardname_rl {
    width: 20rpx;
    height: 23rpx;
}

.card_name {
    width: 170rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    text-align: right;
}

.girl2 {
    width: 100rpx;
    height: 100rpx;
    margin-right: 29rpx;
    border-radius: 50%;
}

.lt-namebox {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.select_card {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.select_carda {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.linkman {
    width: 28rpx;
    height: 26rpx;
    margin-right: 10rpx;
}

.da-name {
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.autogeneration {
    text-align: center;
    line-height: 54rpx;
    width: 140rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.no-autogeneration {
    width: 180rpx;
    height: 54rpx;
    background: #e5e5e5;
    border-radius: 27rpx;
    text-align: center;
    line-height: 54rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.info_nomore {
    width: 22rpx;
    height: 14rpx;
}

.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}

.input-phone-up {
    width: 590rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    border-radius: 40px;
    margin: 0 auto;
    padding-left: 20rpx;
}

.inquire2 {
    text-align: center;
    width: 120rpx;
    line-height: 60rpx;
    height: 60rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 10rpx;
}

.replace-box {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.replace-box2 {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.replace-lt {
    display: flex;
    align-items: center;
    height: 80rpx;
    margin-left: 20rpx;
}

.replace-rl {
    width: 120rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 54rpx;
    margin-right: 10rpx;
    text-align: center;
}

.done {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}

.Cardtype-box {
    width: 590rpx;
    height: 220rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(233, 74, 24, 0.1);
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 20rpx;
}
.placeholder-style2 {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #999999;
}

.Cardtype-title {
    width: 590rpx;
    height: 80rpx;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/card-type.png');
    background-size: 100% 100%;
}

.type-cardbox {
    width: 100%;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(233, 74, 24, 0.1);
    border-radius: 10rpx;
    margin-top: 30rpx;
}

.shopcard-title {
    width: 100%;
    height: 71rpx;
    line-height: 71rpx;
    background-size: 100% 100%;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopcard_title.png');
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title2-name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #883d01;
    margin-left: 21rpx;
}

.cicard {
    width: 82rpx;
    height: 45rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/ci-card.png');
    background-size: 100% 100%;
    line-height: 36rpx;
}

.cicard-info {
    height: 120rpx;
    display: flex;
    align-items: center;
}

.cicard-infoconter {
    width: 550rpx;
    margin: 0 auto;
}

.cards-name {
    display: flex;
    justify-content: space-between;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    align-items: center;
}

.cards-bt {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-time {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.frequencys {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.price-card {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.frequency-but {
    text-align: center;
    line-height: 54rpx;
    width: 140rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.bigbox2 {
    width: 30rpx;
    height: 30rpx;
    border: 1px solid #e94a18;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.smbox {
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background: #e94a18;
}

/* 白色背景 */
.modal-contents {
    position: fixed;
    bottom: 380rpx;
    z-index: 9999;
    width: 600rpx;
    margin-left: 75rpx;
    height: 700rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 20rpx;
}

.modal_title {
    height: 130rpx;
    display: flex;
    align-items: center;
    padding-left: 22rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    /* border-radius: 20rpx 20rpx 0px 0px; */
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 130rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox {
    text-align: center;
    /* height: 113rpx; */
}

.qrcodetext2 {
    font-size: 24rpx;
    padding-top: 20rpx;
}

.qrcodetext {
    margin-top: 20rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    /* line-height: 113rpx; */
}

.qrcodeimage {
    width: 350rpx;
    height: 350rpx;
    display: block;
    margin: 0 auto;
    object-fit: none !important;
    margin-top: 60rpx;
}

.qrcodespan {
    display: block;
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 20rpx;
}

.modal_titleicon {
    width: 82rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.modal_titletext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
}

.modal_textarea {
    height: 395rpx;
    width: calc(100% - 40rpx);
    margin: 20rpx;
    overflow: visible !important;
}

.done {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}

.modal_textarea textarea {
    height: 100%;
    width: 100%;
}

.qrcodebox {
    height: 600rpx;
    text-align: center;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodeicon {
    width: 100%;
    height: 78rpx;
    text-align: center;
    line-height: 78rpx;
    color: #e94a18;
}

.qrcodeiconbox {
    margin-top: 48rpx;
    width: 100rpx;
    text-align: center;
}

.wechattext {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.wechatvip {
    width: 100rpx;
    height: 100rpx;
}

.btn {
    height: 70rpx;
    /* background-color: #5a94ff; */
    color: #fff;
    text-align: center;
    line-height: 70rpx;
    border-radius: 50rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    overflow: visible;
}
</style>
